<template>
  <div style="width:450px;height:300px" ref="chart"></div>
</template>

<script>
// 设备信息视图*******
import * as echarts from "echarts";
export default {
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      let myChart = this.$echarts.init(this.$refs.chart);
      console.log(this.$refs.chart); // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },

        series: [
          {
            type: "pie",
            radius: ["40%", "55%"],
            // 样式
            itemStyle: {
              normal: {
                label: {
                  // 提示文字样式
                  formatter: "{b|{b}：}\n{c|{c}}  {per|{d}%}  ",
                  rich: {
                    b: {
                      fontSize: 16,
                      lineHeight: 30,
                      color: "rgba(139,213,231,0.5)"
                    },
                    c: {
                      fontSize: 20,
                      color: "#8CD1E8"
                    },
                    per: {
                      fontSize: 20,
                      color: "#8CD1E8",
                      padding: [2, 6]
                    }
                  }
                }
              }
            },
            // 文字样式
            label: {
              fontSize: 10
            },
            // 引导线
            labelLine: {
              // 连接图形
              length: 20,
              // 连接文字
              length2: 10,
              lineStyle: {
                color: "rgba(139,213,231,0.5)"
              }
            },
            // 关闭动效
            hoverOffset: 0,
            data: [
              { value: 25, name: "商品交易所支行" },
              { value: 30, name: "瓦房支行" },
              { value: 25, name: "杭州新区支行" },
              { value: 25, name: "上海社区支行" },
              { value: 20, name: "旅顺支行" }
            ]
          }
        ],
        color: ["#eae559", "#33dcf1", "#ff7c7b", "#b661da", "#49df95"]
      });
    }
  }
};
</script>

<style>
</style>